<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        .yellow {
            background-color: yellowgreen
        }
    </style>
</head>

<body>
    <div id="div1" class="box box-re form-inline">
        一、表格 隔行变色／移入变色练习<br><br>
        <button type="button" class="btn btn-info btn1">开启隔行变色</button>
        <button type="button" class="btn btn-info btn2">开启移入变色</button><br><br>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>ID</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>33</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>44</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>55</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                    <td>66</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Danny</td>
                    <td>33</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./js/jquery1.11.3.js"></script>
    <script>
        $('.btn1').click(function () {
            // 文字切换
            $(this).text((index, value) => value .includes('开启') ? '关闭隔行变色' : '开启隔行变色')
            // 表格颜色切换变化
            $('table tbody tr:even').css('backgroundColor', (index, value) => value == 'rgb(255, 255, 0)' ? 'rgb(255, 255, 255)' : 'rgb(255, 255, 0)')
            // $('table tbody tr:even').toggleClass('yellow')

        })
        // 移入是否变色
        $('.btn2').click(function () {
            // 文字切换
            $(this).text((index, value) => value.includes('开启') ? '移出移入变色' : '开启移入变色')
            // 隔行变色自己有颜色其他兄弟没有颜色
            $('table tbody tr').mouseenter(function () {
                if ($('.btn2').text().includes('移出')) {
                    $(this).css('backgroundColor', 'red').siblings().css('backgroundColor', '')
                }
            })
            $('table tbody tr').mouseleave(function () {
                $(this).css('backgroundColor', '')
            })
        })
    </script>
</body>

</html>